<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link rel="stylesheet" href="../../../yl/index.css" />
    <link rel="stylesheet" href="../../../style/index.css" />
    <title>蓝牌</title>
    <style>
        .el-form-item {
            margin-bottom: 0;
        }

        .el-descriptions__label {
            width: 150px;
        }

        .borderless-input .el-input__wrapper {
            border: none !important;
            box-shadow: none !important;
            background: transparent !important;
        }

        /* 移除聚焦状态样式 */
        .borderless-input .el-input__wrapper.is-focus {
            box-shadow: none !important;
        }

        .el-select__wrapper {
            border: none !important;
            box-shadow: none !important;
            background: transparent !important;
        }
    </style>
</head>

<body>
    <div id="app" v-cloak>
        <div class="title" style="margin:0 10px;">
            <div style="padding: 5px;">
                蓝牌编号<el-input v-model="page.value2" style="width: 200px; margin:0 10px;"
                    placeholder="请输入蓝牌编号"></el-input>
                蓝牌名称<el-input v-model="page.value1" style="width: 200px; margin:0 10px; "
                    placeholder="请输入蓝牌名称"></el-input>
                <el-button icon="Search" style="margin: 0; margin-right: 10px;" @click="check">查询</el-button>
                <el-button icon="Refresh" style="margin: 0; margin-right: 10px;" @click="reset">重置</el-button>

                <el-button type="primary" icon="CirclePlus" style="margin: 0; margin-right: 10px;" @click="personalAdd"
                    plain round>添加</el-button>
                <!-- <el-button type="warning" icon="Download" style="margin: 0; margin-right: 10px;" @click="personalAdd"
                    plain round>批量导入</el-button>
                <el-button type="success" icon="Upload" style="margin: 0; margin-right: 10px;" @click="personalAdd"
                    plain round>批量导出</el-button>
                <el-button type="danger" icon="Delete" style="margin: 0; margin-right: 10px;" @click="personalAdd" plain
                    round>批量删除</el-button> -->
            </div>
        </div>
        <div class="body">
            <div class="left">
                <el-tree ref="tree" default-expand-all :expand-on-click-node="false" id="tree"
                    :data-options="JSON.stringify({ 'TableName': 'grid_information', 'NodeCode': '','primary_key':'Grid_SerialNumber' })"
                    style="max-width: 600px" :data="treeData" @node-click="handleNodeClick"
                    :props="{ label: 'Province' }">
                    <template #default="{ node, data }">
                        <div class="custom-tree-node">
                            <span>{{ node.label }}</span>
                        </div>
                    </template>
                </el-tree>
            </div>
            <div class="right">
                <el-tabs v-model="page.activeName" type="card" @tab-click="handleClick">
                    <el-tab-pane name="first">
                        <template #label>
                            <div
                                style="width: 10px;height: 10px;background: linear-gradient(to right, #409EFF, #67C23A, #E6A23C, #F56C6C, #7844a3); margin-right: 10px;">
                            </div>
                            全部
                        </template>
                    </el-tab-pane>
                    <el-tab-pane name="second">
                        <template #label>
                            <div style="width: 10px;height: 10px;background-color: #409EFF; margin-right: 10px;"></div>
                            自建房
                        </template>
                    </el-tab-pane>
                    <el-tab-pane name="third">
                        <template #label>
                            <div style="width: 10px;height: 10px;background-color: #67C23A; margin-right: 10px;"></div>
                            居民户
                        </template>
                    </el-tab-pane>
                    <el-tab-pane name="fourth">
                        <template #label>
                            <div style="width: 10px;height: 10px;background-color: #E6A23C; margin-right: 10px;"></div>
                            商户
                        </template>
                    </el-tab-pane>
                    <el-tab-pane name="fifth">
                        <template #label>
                            <div style="width: 10px;height: 10px;background-color: #F56C6C; margin-right: 10px;"></div>
                            企业
                        </template>
                    </el-tab-pane>
                    <el-tab-pane name="sixth">
                        <template #label>
                            <div style="width: 10px;height: 10px;background-color: #7844a3; margin-right: 10px;"></div>
                            党支部
                        </template>
                    </el-tab-pane>
                </el-tabs>
                <el-table id="table" border
                    :data-options="JSON.stringify({ 'TableName': 'blue_plate_information','primary_key':'Blue_Plate_SerialNumber'})"
                    height="450" v-loading="loading" ref="multipleTable" tooltip-effect="dark" :data="Tabletdata"
                    @selection-change="handleSelectionChange">
                    <el-table-column fixed="left" align="center" label="标识" width="60">
                        <template v-slot="{row}">
                            <div style="width: 100%; display: flex; justify-content: center;">
                                <div :style="{...colors(row)}"
                                    style="width: 10px;height: 10px;border-radius: 50%;"></div>
                            </div>
                        </template>
                    </el-table-column>
                    <el-table-column min-width="180" show-overflow-tooltip v-for="column in columns"
                        :key="column.COLUMN_NAME" :prop="column.COLUMN_NAME" :label="column.COLUMN_COMMENT">
                        <template v-slot="{row}">
                            <div v-if="row[column.COLUMN_NAME].includes('.png')||row[column.COLUMN_NAME].includes('.jpg')">
                                <el-image style="width: 100px; height: 100px" :src="photo + row[column.COLUMN_NAME]"
                                    fit="contain"></el-image>
                            </div>
                            <template v-else>
                                {{row[column.COLUMN_NAME]}}
                            </template>
                        </template>
                    </el-table-column>
                    <el-table-column label="标记" width="80">
                        <template v-slot="{row}">
                            {{row.Self_Built_Houses=='0'?'':'自建房'}}
                        </template>
                    </el-table-column>
                    <el-table-column label="操作" fixed="right" width="180">
                        <template #default="{row}">
                            <div style="display: flex; align-items: center;">
                                <el-button size="small" style="margin-right: 10px;" @click="handleEdit(row)">
                                    编辑
                                </el-button>
                                <el-dropdown trigger="click" @command="(val)=>{this[val](row)}">
                                    <el-button size="small" type="danger">
                                        更多<el-icon class="el-icon--right"><arrow-down /></el-icon>
                                    </el-button>
                                    <template #dropdown>
                                        <el-dropdown-menu>
                                            <el-dropdown-item command="handleQH">
                                                蓝牌二维码
                                            </el-dropdown-item>
                                            <el-dropdown-item command="handleHouse">
                                                关联房屋
                                            </el-dropdown-item>
                                            <el-dropdown-item command="population">
                                                关联人口
                                            </el-dropdown-item>
                                            <el-dropdown-item v-if="row.Self_Built_Houses=='0'" command="selfbuilthouses">
                                                自建房标记
                                            </el-dropdown-item>
                                            <el-dropdown-item command="handleDelete">
                                                删除
                                            </el-dropdown-item>
                                        </el-dropdown-menu>
                                    </template>
                                </el-dropdown>
                            </div>
                        </template>
                    </el-table-column>
                </el-table>
                <el-pagination style="margin-top: 1%;" :current-page="page.PageNumber" :page-size="page.RowAmount"
                    :page-sizes="[10, 100, 200, 300, 400]" layout="total, sizes, prev, pager, next, jumper"
                    :total="Total" @size-change="handleSizeChange" @current-change="handleCurrentChange" />
            </div>
        </div>
        <el-dialog v-model="showDialog2" :destroy-on-close="true" width="1000" :close-on-click-modal="false"
            class="custom-dialog">
            <template #header>
                <div class="dialog-header">
                    <span>自建房属性</span>
                </div>
            </template>
            <el-form :model="form1" ref="form" :inline-message="true" style="width: 100%">
                <el-descriptions style="width: 100%;margin-left: 10px;" :column="2" size="large" border>
                    <el-descriptions-item>
                        <template #label>
                            <div class="cell-item">房屋名称</div>
                        </template>
                        <el-form-item prop="Self_Built_House_Name"
                            :rules="[{ required: true, message: '请输入房屋名称', trigger: 'blur' }]">
                            <el-input v-model.trim="form1.Self_Built_House_Name" class="borderless-input"
                                placeholder="请输入房屋名称" />
                        </el-form-item>
                    </el-descriptions-item>
                    <el-descriptions-item>
                        <template #label>
                            <div class="cell-item">所属自然村</div>
                        </template>
                        <el-form-item prop="VillageNumber"
                            :rules="[{ required: true, message: '请选择所属自然村', trigger: 'change' }]">
                            <el-select clearable v-model.trim="form1.VillageNumber" placeholder="请选择所属自然村" filterable
                                style="width: 100%">
                                <el-option v-for="(item,index) in base_system_village" :key="index"
                                    :label="item.Village" :value="item.VillageNumber"></el-option>
                            </el-select>
                        </el-form-item>
                    </el-descriptions-item>
                    <el-descriptions-item>
                        <template #label>
                            <div class="cell-item">占地面积</div>
                        </template>
                        <el-form-item prop="Area" :rules="[{ required: true, message: '请选择所属自然村', trigger: 'change' }]">
                            <el-input v-model.trim="form1.Area" class="borderless-input" placeholder="请输入占地面积" />
                        </el-form-item>
                    </el-descriptions-item>
                    <el-descriptions-item>
                        <template #label>
                            <div class="cell-item">建造日期</div>
                        </template>
                        <el-form-item prop="Build_Date">
                            <el-date-picker v-model="form1.Build_Date" type="date" placeholder="请选择建造日期"
                                class="borderless-input" format="YYYY-MM-DD" value-format="YYYY-MM-DD" size="large" />
                        </el-form-item>
                    </el-descriptions-item>
                    <el-descriptions-item>
                        <template #label>
                            <div class="cell-item">建设性质</div>
                        </template>
                        <el-form-item prop="Build_Type">
                            <el-select clearable v-model.trim="form1.Built_Type_SerialNumber" placeholder="请选择建设性质"
                                filterable style="width: 100%">
                                <el-option v-for="(item,index) in blue_plate_self_built_house_type" :key="index"
                                    :label="item.Built_Type" :value="item.Built_Type_SerialNumber"></el-option>
                            </el-select>
                        </el-form-item>
                    </el-descriptions-item>
                </el-descriptions>
            </el-form>
            <template #footer>
                <div class="dialog-footer">
                    <el-button @click="showDialog2 = false" class="cancel-btn">取消</el-button>
                    <el-button type="primary" @click="handleSubmit" :loading="loading2" class="confirm-btn">保存</el-button>
                </div>
            </template>
        </el-dialog>
        <el-dialog v-cloak v-model="showDialog" width="300" class="custom-dialog">
            <template #header>
                <div class="dialog-header">
                    <span>蓝牌二维码</span>
                </div>
            </template>
            <div class="dialog-content" style="display: flex; justify-content: center;">
                <img id="qr-img" style="width: 200px; height: 200px;">
            </div>
            <template #footer>
                <div class="dialog-footer">
                    <el-button @click="showDialog = false" class="cancel-btn">关闭</el-button>
                    <!-- <el-button type="primary" @click="downloadQR" class="confirm-btn">下载二维码</el-button> -->
                </div>
            </template>
        </el-dialog>
        <el-dialog v-model="showDialog1" width="850" class="custom-dialog">
            <template #header>
                <div class="dialog-header">
                    <span>{{form.Self_Built_Houses=='0'?'请选择':'自建房预览'}}</span>
                </div>
            </template>
            <div class="dialog-content" style="display: flex;justify-content: center;">
                <yl-house-grid :data="form" :layer="layer" @node-click="handleRoom"></yl-house-grid>
            </div>
            <template #footer>
                <div class="dialog-footer">
                    <el-button v-if="form.Self_Built_Houses == '1'" @click="handleRoom1"
                        class="cancel-btn">关联人口</el-button>
                    <el-button @click="showDialog1 = false" class="cancel-btn">取消</el-button>
                </div>
            </template>
        </el-dialog>
    </div>
    </div>
    <script src="../../../utils/utils.js"></script>
    <script src="../../../config/config.js"></script>
    <script src="../../../utils/qrious.js"></script>
    <script src="../../../utils/mixins.js"></script>
    <script src="../../../yl/vue.js"></script>
    <script src="../../../yl/index.js"></script>
    <script src="../../../yl/zh-cn.mjs"></script>
    <script src="../../../yl/index.iife.min.js"></script>
    <script src="../../../yl/jquery.min.js"></script>
    <script src="../../../utils/jquery.cookie.js"></script>
    <script src="../../../api/request.js"></script>
    <script src="js/index.js"></script>
</body>

</html>